<!-- 标题组件 -->
<template>
    <div class="mainData">
        <h1 class="title">Vue学习</h1>
    </div>
    <div class="btn">
        <span class="btnList">标签一</span>
        <span class="btnList">标签二</span>
        <span class="btnList">标签三</span>
        <span class="btnList">标签四</span>
        <span class="btnList">标签五</span>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

</script>

<style>
/* 移动端 */
@media (min-width: 1024px) {}

/* pc端 */
@media (max-width: 1024px) {}

/* 通用样式 */
div {
    display: block;
}

.mainData {
    max-width: 1024px;
    box-shadow: 1px 1px 4px #000000;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
}

.title {
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px #000000 dashed;
}
.btn{
    display: flex;align-items: center;justify-content: space-around;
    margin-top: 20px;
}
.btnList{
    padding: 10px 16px;border-radius: 10px;
    border: 2px solid #000000;
    font-size: 16px;font-weight: 600;
}
</style>